<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-white" :isBack="false">
			<block slot="content">商学院</block>
		</cu-custom>
		<!-- #endif -->
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'cur text-'+theme:''" v-for="(item,index) in listObj" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>

		<view v-for="(item,index) in listObj" :key="index" v-if="index==TabCur">
			<block v-for="(live, i) in item.list" :key="i">
				<LiveView :value="live" :styles="'list'"></LiveView>
			</block>

			<view class="cu-load margin-center" :class="item.loading?'loading':'over'"></view>
		</view>

		<Foot></Foot>
		<Navbar PageCur="live"></Navbar>
	</view>
</template>

<script>
	import LiveView from '@/components/shop/LiveView.vue'
	import Navbar from '@/components/default/Navbar.vue'
	import Foot from '@/components/default/foot.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		name: "index",
		components: {
			LiveView,
			Navbar,
			Foot,
		},
		data() {
			return {
				TabCur: 0,
				listObj: [{
					title: '当前直播',
					type: 1,
					start: 1,
					page: 1,
					hasMore: true,
					loading: false,
					list: []
				}, {
					title: '回播',
					type: 2,
					start: null,
					page: 1,
					hasMore: true,
					loading: false,
					list: []
				}, {
					title: '即将开播',
					type: 3,
					start: 0,
					page: 1,
					hasMore: true,
					loading: false,
					list: []
				}, ],
				theme: this.$config.THEME(),
			}
		},
		onLoad(options) {
			this.$nextTick(function() {
				uni.startPullDownRefresh({})
			})
		},
		onShow() {},
		methods: {
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = parseInt(e.currentTarget.dataset.id)
					this.getList(this.TabCur)
				}
			},
			getList(index) {
				let obj = this.listObj[index]
				if (!obj.hasMore || obj.loading) return
				this.listObj[index].loading = true
				this.$http
					.get('in_live_index', {
						type_id: obj.type,
						start: obj.start,
						page: obj.page,
					})
					.then((response) => {
						console.log(response)
						let list = this.listObj[index].list
						if (response.data.data.length > 0) {
							list = list.concat(response.data.data)
						} else {
							this.listObj[index].hasMore = false
						}
						this.listObj[index].loading = false
						this.listObj[index].list = list
						this.listObj[index].page += 1
						console.log(this.listObj)
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
					})
			},
		},
		onPullDownRefresh() {
			this.listObj[this.TabCur].list = []
			this.listObj[this.TabCur].page = 1
			this.listObj[this.TabCur].loading = false
			this.listObj[this.TabCur].hasMore = true
			this.getList(this.TabCur)
			// this.getInfoData()
		},
		onReachBottom() {
			this.getList(this.TabCur)
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/live/index'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-带货直播',
				imageUrl: '',
				path: path
			}
		},
	}
</script>

<style>
</style>
